<template>
<section id="k8s-nodes">
    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>详情</div>
        <hr>
        <el-row>
            <el-col :span="14">
                <div style="margin-bottom: 5px">名称：{{this.NodeDetail.name}}</div>
                <div style="margin-bottom: 5px">地址：{{this.NodeDetail.ip}}</div>
                <div style="margin-bottom: 5px">标签：<el-tag v-for="(v,k) in NodeDetail.labels" type="default" size="small">{{k}}: {{v}}</el-tag></div>
                <div style="margin-bottom: 5px">注释：<el-tag v-for="(v,k) in NodeDetail.annotations" type="default" size="small">{{k}}: {{v}}</el-tag></div>
                <div style="margin-bottom: 5px">创建时间：{{this.NodeDetail.joindate}}</div>
                <div style="margin-bottom: 5px">不可调度：<el-tag type="danger" size="small" >{{this.NodeDetail.unschedulable}}</el-tag></div>
            </el-col>
            <el-col :span="10">
                <div style="margin-bottom: 5px">内核版本：{{this.NodeDetail.systemversion}}</div>
                <div style="margin-bottom: 5px">操作系统镜像：{{this.NodeDetail.system}}</div>
                <div style="margin-bottom: 5px">docker版本：{{this.NodeDetail.dockerversion}}</div>
                <div style="margin-bottom: 5px">kubelet版本：{{this.NodeDetail.kubeletversion}}</div>
                <div style="margin-bottom: 5px">kube-proxy版本：{{this.NodeDetail.kubeproxyversion}}</div>
                <div style="margin-bottom: 5px">操作系统：{{this.NodeDetail.coreversion}}</div>
                <div style="margin-bottom: 5px">架构：{{this.NodeDetail.systemarch}}</div>

            </el-col>
        </el-row>
    </el-card>
    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>已分配资源</div>
        <hr>
        <el-row>
            <el-col :span="8">
                <div id="cpu-request-limit" style="width:100%; height:300px;"></div>
                <div style="text-align: center;font-weight: bold;font-size: 15px">CPU allocation (cores)</div>
                <el-row>

                    <el-col :span="4" :offset="9">
                        <div style="color: #0099FF">请求值</div>
                    </el-col >
                    <el-col :span="2" >
                        {{NodeDetail.resourceRequestAndLimits.cpuRequests/1000}}
                    </el-col >
                </el-row>
                <el-row>

                    <el-col :span="4" :offset="9">
                        <div style="color: #00CC33">限制值</div>
                    </el-col >
                    <el-col :span="2" >
                        {{NodeDetail.resourceRequestAndLimits.cpuLimits/1000}}
                    </el-col >
                </el-row>
                <el-row>
                    <el-col :span="4" :offset="9">
                        总量
                    </el-col >
                    <el-col :span="2" >
                        {{NodeDetail.resourceRequestAndLimits.cpuCapacity/1000}}
                    </el-col >
                </el-row>
            </el-col>
            <el-col :span="8">
                <div id="memory-request-limit" style="width:100%; height:300px;"></div>
                <div style="text-align: center;font-weight: bold;font-size: 15px">Memory allocation (bytes)</div>
                <el-row>
                    <el-col :span="4" :offset="9">
                        <div style="color: #0099FF">请求值</div>
                    </el-col >
                    <el-col :span="2" >
                        <!--{{NodeDetail.resourceRequestAndLimits.memoryRequests/1024/1024}}-->
                        <div v-if="NodeDetail.resourceRequestAndLimits.memoryRequests/1024/1024/1024 > 1">{{NodeDetail.resourceRequestAndLimits.memoryRequests/1024/1024/1024}} Gi</div>
                        <div>{{(NodeDetail.resourceRequestAndLimits.memoryRequests/1024/1024)}} Mi</div>
                    </el-col >
                </el-row>
                <el-row>

                    <el-col :span="4" :offset="9">
                        <div style="color: #00CC33">限制值</div>
                    </el-col >
                    <el-col :span="4" >
                        <div v-if="NodeDetail.resourceRequestAndLimits.memoryLimits/1024/1024/1024 > 1">{{Floor(NodeDetail.resourceRequestAndLimits.memoryLimits/1024/1024/1024)}} Gi</div>
                        <div v-else>{{Floor(NodeDetail.resourceRequestAndLimits.memoryLimits/1024/1024)}} Mi</div>
                    </el-col >
                </el-row>
                <el-row>
                    <el-col :span="4" :offset="9">
                        总量
                    </el-col >
                    <el-col :span="4" >
                        <div>{{Floor(NodeDetail.resourceRequestAndLimits.memoryCapacity/1024/1024/1024)}} Gi</div>
                    </el-col >
                </el-row>
            </el-col>



            <el-col :span="8">
                <div id="pod-used" style="width:100%; height:300px;"></div>
                <div style="text-align: center;font-weight: bold;font-size: 15px">Node Pods allocation</div>

                <el-row>

                    <el-col :span="4" :offset="9">
                        <div style="color: #00CC33">已分配</div>
                    </el-col >

                    <el-col :span="2" >
                        {{NodeDetail.resourceRequestAndLimits.allocatedPods}}
                    </el-col >
                </el-row>
                <el-row>
                    <el-col :span="4" :offset="9">
                        总量
                    </el-col >
                    <el-col :span="2" >
                        {{NodeDetail.resourceRequestAndLimits.podCapacity}}
                    </el-col >
                </el-row>
            </el-col>
        </el-row>
    </el-card>
    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>现状</div>
        <hr>
        <el-table
                :data="NodeDetail.currentstatus"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >
            <el-table-column
                    prop="type"
                    label="类型"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="reason"
                    label="原因">
            </el-table-column>
            <el-table-column
                    prop="message"
                    label="消息">
            </el-table-column>
        </el-table>
    </el-card>
    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>容器组</div>
        <hr>
        <el-table
                :data="NodeDetail.pods"
                style="width: 100%"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >
            <el-table-column

                    width="40">
                <template slot-scope="scope">
                    <i :class="scope.row.status !== 'Running' ? 'fa fa-info-circle' : 'fa fa-check-circle'"
                       :style="scope.row.status !== 'Running' ? 'font-size:18px;color:red' : 'font-size:18px;color:green'"
                    >

                    </i>

                </template>



            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="nodeip"
                    label="节点地址"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="podip"
                    label="容器地址"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
            </el-table-column>
            <el-table-column
                    prop="restartcount"
                    label="已重启">
            </el-table-column>
            <el-table-column
                    prop="createdate"
                    label="创建时间">
            </el-table-column>
        </el-table>
    </el-card>
    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>事件</div>
        <hr>
        <el-table
                :data="NodeDetail.events"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >
            <template slot="empty">
                <p>暂无事件内容</p>
            </template>

            <el-table-column
                    prop="message"
                    label="消息"
                    width="600">
            </el-table-column>
            <el-table-column
                    prop="source"
                    label="来源">
            </el-table-column>
            <el-table-column
                    prop="childobject"
                    label="子对象"
            >
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="总数"
            >
            </el-table-column>
            <el-table-column
                    prop="reason"
                    label="原因"
            >
            </el-table-column>
            <el-table-column
                    prop="lastoccurtime"
                    label="最近出现于"
            >
            </el-table-column>


        </el-table>
    </el-card>
</section>
</template>
<script>
    import echarts from 'echarts'
    import { k8sNodeDetailData } from '../../api/api'
    export default {
        data() {
            return {
                NodeDetail: {
                    resourceRequestAndLimits :{},
                },
                cpuResourcePie: null,
                memoryResourcePie: null,
                podResourcePie: null,
            };
        },
        methods: {
            getK8sNodeDetailData(){
                let self = this
                let param = {name:this.$route.params.name}
                k8sNodeDetailData(param).then((res) => {
                    console.log(res)
                    self.NodeDetail = res.detail
                    self.NodeDetail.events = res.events


                    this.drawCharts()
                })

            },
            drawCpuResourceChart() {
                let self = this
                this.cpuResourcePie = echarts.init(document.getElementById('cpu-request-limit'));
                this.cpuResourcePie.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: ({d}%)"
                    },
                    color:['#0099FF', '#D0D0D0','#00CC33','#D0D0D0'],


                    series: [
                        {
                            name:'cpu request',
                            type:'pie',
                            selectedMode: 'single',
                            radius: ['35%', '50%'],
                            center: ['50%', '50%'],

                            label: {
                                normal: {
                                    show : false,
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:self.NodeDetail.resourceRequestAndLimits.cpuLimitsFraction, name:'限制'},
                                {value:100-self.NodeDetail.resourceRequestAndLimits.cpuLimitsFraction},

                            ]
                        },
                        {
                            name:'cpu limit',
                            type:'pie',
                            selectedMode: 'single',


                            label: {
                                normal: {
                                    show : false
                                }
                            },
                            radius: ['55%', '70%'],
                            center: ['50%', '50%'],
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:self.NodeDetail.resourceRequestAndLimits.cpuRequestsFraction, name:'请求'},
                                {value:100-self.NodeDetail.resourceRequestAndLimits.cpuRequestsFraction},

                            ]
                        }
                    ]
                });
            },
            drawMemoryResourceChart() {
                let self = this
                this.memoryResourcePie = echarts.init(document.getElementById('memory-request-limit'));
                this.memoryResourcePie.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: ({d}%)"
                    },
                    color:['#0099FF', '#D0D0D0','#00CC33','#D0D0D0'],


                    series: [
                        {
                            name:'memory request',
                            type:'pie',
                            selectedMode: 'single',
                            radius: ['35%', '50%'],
                            center: ['50%', '50%'],

                            label: {
                                normal: {
                                    show : false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:self.NodeDetail.resourceRequestAndLimits.memoryLimitsFraction, name:'限制'},
                                {value:100-self.NodeDetail.resourceRequestAndLimits.memoryLimitsFraction},

                            ]
                        },
                        {
                            name:'memory limit',
                            type:'pie',
                            selectedMode: 'single',


                            label: {
                                normal: {
                                    show : false
                                }
                            },
                            radius: ['55%', '70%'],
                            center: ['50%', '50%'],
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:self.NodeDetail.resourceRequestAndLimits.memoryRequestsFraction, name:'请求'},
                                {value:100-self.NodeDetail.resourceRequestAndLimits.memoryRequestsFraction},

                            ]
                        }
                    ]
                });
            },
            drawPodResourceChart() {
                let self = this
                this.podResourcePie = echarts.init(document.getElementById('pod-used'));
                this.podResourcePie.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: ({d}%)"
                    },
                    color:['#00CC33', '#D0D0D0'],


                    series: [
                        {
                            name:'memory limit',
                            type:'pie',
                            selectedMode: 'single',


                            label: {
                                normal: {
                                    show : false
                                }
                            },
                            radius: ['55%', '70%'],
                            center: ['50%', '50%'],
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:7.3, name:'分配'},
                                {value:92.7},

                            ]
                        }
                    ]
                });
            },
            drawCharts() {
                this.drawCpuResourceChart()
                this.drawMemoryResourceChart()
                this.drawPodResourceChart()

            },

            Floor(x){
                // return Math.floor(x)
                return x.toFixed(2)
            },


            rowStyle({ row, rowIndex}){
                return "height:40px;background-color: #FAFAFA;"
            },
            headerStyle({ row, rowIndex}){
                return "height:20px;color:#0099FF;background-color: #FAFAFA;"
            },
        },
        mounted: function () {
            this.drawCharts()
        },
        mounted: function () {
            console.log(this.$route.params.name)
            this.getK8sNodeDetailData()


        }
    }
</script>
<style>
    #k8s-nodes .bg-card {
        background-color: #FAFAFA;
    }
    #k8s-nodes .el-table__empty-block {
        background-color: #FAFAFA;
        height: 40px;
        font-weight: bold;
    }

</style>